<template>
	<view>
		<view class="titleBox">更多推荐</view>
		<view class="listBox">
				<!-- 左边 -->
			<view class="Box">
				<!-- 轮播 -->
				<swiper indicator-dots class="swiper" autoplay="true" interval="4000" circular>
					<swiper-item class="swiperItem"  v-for="(item,index) in swiperList" :key="index">
						<image :src="item.picUrl" @click="gouyhj(index)" class="img" mode="aspectFill" ></image>
					</swiper-item>
				</swiper>
				
				<!-- 商品广告 -->
				<view class="item" @click="toDetail(item)" v-for="(item,index) in recommendList.left" :key="index">
				<view v-if="item.type == 'RECOMMEND_SERVICE'">
					<view class="imgBox">
						<!-- 标签 -->
						<view style="height: 10rpx;"></view>
						<view class="titleTips">{{item.title}}</view>
						<view style="font-size: 30rpx;margin-bottom: 20rpx; margin-top: 10rpx;margin-left: 20rpx;">{{item.description}}</view>
							<view class="imgBox">
								<image style="border-radius: 0;" class="img" mode="widthFix" :src="item.picUrl">
								</image>
								<!-- 黑阴影 -->
								<view class="type">{{item.unionName}}</view>
							</view>
						<view style="margin: 0 auto;margin-top: 20rpx;margin-bottom: 20rpx; color: #fff;font-size: 26rpx;text-align: center;line-height: 50rpx;border-radius: 24rpx; width: 240rpx;height: 50rpx;background-color:#51a0fd;">查看更多服务</view>
					</view>
					
					
				</view>
					<view v-else>
						<view class="imgBox">
							<!-- 标签 -->
							<!-- <view class="titleTips" v-if="item.type == 'RECOMMEND_SERVICE'">{{item.title}}</view> -->
							<image class="img" mode="widthFix" :src="item.picUrl">
							</image>
							<!-- 黑阴影 -->
							<view class="type">{{item.unionName}}</view>
						</view>
						
						<view class="bottom">
							<view class="title" v-if="item.type == 'RECOMMEND_ITEM'">{{item.title}}</view>
							<view class="content twoOver">{{item.type == 'RECOMMEND_COMMENT'?item.comment.comment :item.description}}</view>
							<view class="userBox" v-if="item.comment">
								<image mode="aspectFill" class="avatar" :src="item.comment.commentUser.avatar"></image>
								<view class="phone">{{item.comment.commentUser.phonenumber}}</view>
							</view>
						</view>
					</view>
					
					
				</view>
			</view>
			<!-- 右边 -->
			<view class="Box">
		
				<!-- 商品广告 -->
				<view class="item" @click="toDetail(item)" v-for="(item,index) in recommendList.right" :key="index">
					<view v-if="item.type == 'RECOMMEND_SERVICE'">
						<view class="imgBox">
							<!-- 标签 -->
							<view style="height: 10rpx;"></view>
							<view class="titleTips">{{item.title}}</view>
							<view style="font-size: 30rpx;margin-bottom: 20rpx; margin-top: 10rpx;margin-left: 20rpx;">{{item.description}}</view>
								<view class="imgBox">
									<image style="border-radius: 0;" class="img" mode="widthFix" :src="item.picUrl">
									</image>
									<!-- 黑阴影 -->
									<view class="type">{{item.unionName}}</view>
								</view>
								
							<view style="margin: 0 auto;margin-top: 20rpx;margin-bottom: 20rpx; color: #fff;font-size: 26rpx;text-align: center;line-height: 50rpx;border-radius: 24rpx; width: 240rpx;height: 50rpx;background-color:#51a0fd;">查看更多服务</view>
						</view>
						
						
					</view>
					<view v-else>
						<view class="imgBox">
							<!-- 标签 -->
							<!-- <view class="titleTips" v-if="item.type == 'RECOMMEND_SERVICE'">{{item.title}}</view> -->
							<image class="img" mode="widthFix" :src="item.picUrl">
							</image>
							<!-- 黑阴影 -->
							<view class="type">{{item.unionName}}</view>
						</view>
						
						<view class="bottom">
							<view class="title" v-if="item.type == 'RECOMMEND_ITEM'">{{item.title}}</view>
							<view class="content twoOver">{{item.type == 'RECOMMEND_COMMENT'?item.comment.comment :item.description}}</view>
							<view class="userBox" v-if="item.comment">
								<image mode="aspectFill" class="avatar" :src="item.comment.commentUser.avatar"></image>
								<view class="phone">{{item.comment.commentUser.phonenumber}}</view>
							</view>
						</view>
					</view>
					
					
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive, ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const {proxy} = getCurrentInstance()

	const isactive = ref(1)
	const scrollobj = reactive({
		triggered:false,
		pageNum:1,
		pageSize:10,
		isloading:false,
		total:0,
		isjz:false,
		pulldown:false
	})
	
	onMounted(async()=>{
		await Promise.all([contentListfun()])
	})
	const emits = defineEmits(["triggeredfun"])
	const triggeredfun = () => {
			emits("triggeredfun", false)
			console.log('命令已发送');
			
	} 
	//轮播跳转
	const gouyhj=(index)=>{
		if(index==1){
			uni.navigateTo({
				url: '/pages-user/coupon/coupon'
			})
		}else{
			uni.navigateTo({
				url: '/pages-detail/kefu/kefu'
			})
		}
	}
	const recommendList = reactive({
		left:[],
		right:[]
	})
	const swiperList = ref([])
	//列表请求
	const contentListfun=async()=>{
		scrollobj.isloading = true
		var data = {pageNum:scrollobj.pageNum}
		const result = await proxy.$api.recommend(data)
		if(result.code==200){
			console.log('服务订单列表',result);
			
			if (result.data.carouselImages){
				swiperList.value = result.data.carouselImages
			}
			scrollobj.isloading = false
			if(result.data.res.length>0){
				scrollobj.total = result.data.res.length
				result.data.res.map((item, index) => {
					if (index % 2 === 0) {
						recommendList.right.push(item);
					} else {
						recommendList.left.push(item);
					}
				})
			}
			uni.hideLoading()
			triggeredfun()
		}
	}
	//去详情、分类
	const toDetail=(data)=> {
		if(data.type == 'RECOMMEND_ITEM'){
			uni.navigateTo({
				url: '/pages-detail/shop-detail/shop-detail?id=' + data.unionId
			})
		}else if(data.type == 'RECOMMEND_SERVICE'){
			navStore.$patch({ categoryid: navStore.categoryid =data.service.catId })
			uni.reLaunch({
				url:'/pages/home/home?isactive='+2
			})
		}else{
			navStore.$patch({ detail: navStore.detail =data})
			uni.navigateTo({
				url: `/pages-detail/evaluate-detail/evaluate-detail`
			})
		}
	}
	//下拉刷新
	const pulldown=()=>{
		scrollobj.pageNum=1
		recommendList.value = []
		contentListfun()
	}
	//上啦加载
	const scrolltolower=()=>{
		if (scrollobj.total < 3) {
			proxy.$showToast('没有更多了')
			return
		}
		if (scrollobj.isloading) return;
			scrollobj.pageNum++;
			uni.showLoading({
				title: '加载中'
			});
			contentListfun()
	}
	const chooseorder=(id)=>{
		isactive.value = id
	}
	defineExpose({
		pulldown,
		scrolltolower
	})

</script>

<style lang="scss">
	.titleBox {
		padding: 10px 20px;
		font-weight: bold;
		font-family: '阿里妈妈数黑体';
		font-size: 16px;
	}
	.titleBoxh {
		display: flex;
		justify-content: start;
		align-items: flex-end;
	
		.title {
			font-weight: bold;
			font-family: '禹冰之家';
			font-size: 36rpx;
			
			color: black;
		}
	
		.tips {
			color: black;
			font-size: 26rpx;
			margin-left: 5px;
			font-weight: bold;
			color: #51a0fd;
			font-style: italic;
		}
	}
.listBox {
		width: 710rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: start;
		padding-bottom: 100px;
		background-color: #f8f8f8;

		.Box {
			width: 345rpx;
			.swiper {
				width: 345rpx;
				height: 450rpx;
				margin-bottom: 10px;

				.swiperItem {
					width: 345rpx;
					height: 450rpx;
					position: relative;

					.img {
						width: 345rpx;
						height: 450rpx;
						border-radius: 10px;
					}


					.bottom {
						z-index: +10;
					}
				}

			}

			.item {
				background-color: white;
				border-radius: 10px;
				margin-bottom: 10px;
				padding-bottom: 20rpx;
				box-sizing: border-box;



				.imgBox{
					position: relative;
					width: 100%;
					
					.titleTips{
						// position: absolute;
						// top: 10px;
						// left: 10px;
						margin-bottom:20rpx;
						color: #51a0fd;
						font-size: 26rpx;
						margin-left: 20rpx;
					}
					
					.type{
						position: absolute;
						z-index: +0;
						bottom: 10px;
						left: 5px;
						font-size: 12px;
						background: rgba(0, 0, 0, 0.4);
						color: white;
						padding: 5px;
						border-radius: 5px;
					}
				}

				.img {
					width: 100%;
					border-radius: 10px 10px 0 0;
				}

				.bottom {
					padding: 10px;
					font-size: 15px;

					.userBox{
						display: flex;
						margin-top: 5px;
						align-items: center;
						.avatar{
							width: 15px;
							height: 15px;
							border-radius: 50%;
							background-color: #51a0fd;
						}
						.phone{
							font-size: 12px;
							margin-left: 5px;
						}
					}

					.title {
						font-size: 12px;
						color: $grey;
					}

					.content {
						font-size: 14px;
						margin-top: 5px;
						font-weight: bold;
					}
				}
			}

		}
	}
</style>
